<template>
<div>
    <div class="build-ID-box">
        <h1 class="Basics-title">
            <h2>附件</h2>
            <div class="button-group-right">
                <el-upload action :file-list="fileList" accept="application/pdf" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="httpRequest">
                    <el-button size="small" class="upload_button" v-if="detailBtIsLook">上传文件</el-button>
                </el-upload>
            </div>
        </h1>

        <div class="upload-box">
            <!--
        <div class="tip">暂无附件</div>-->
            <div class="upload" v-for="(item,index) in fileList" :key="index">
                <div class="pic">
                    <img src="@/assets/image/pdf.png" alt />
                </div>
                <div class="upload-right">
                    <h1>{{item.name}}</h1>
                    <div class="size">
                        <span class="tip-size">{{item.size|newSize}}M</span>
                        <div class="sonRightBotRight">
                            <img class="sonRightBotRightImg" src="@/assets/image/preview.png" />
                            <div class="sonRightBotRightText" @click="beforeLooking(item)">预览</div>
                            <div class="sonRightBotRightLine"></div>
                            <img class="sonRightBotRightInmage" src="@/assets/image/download.png" />
                            <div id="linkUrl" class="sonRightBotRightText" @click="downLoadPdf(item)">下载</div>
                        </div>
                    </div>
                </div>
                <!--叉号按钮-->
                <div class="Cross" @click="removeItem(index)" v-if="detailBtIsLook">x</div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
        };
    },
    props: ["attachList", "detailBtIsLook"],
    filters: {
        newSize(val) {
            val = val / 1024 / 1024;
            // console.log(val)
            return Math.round(val * 10) / 10
        },
    },
    computed: {
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        }
    },
    watch: {
        attachList: {
            deep: true,
            handler(newval) {
                if (newval) {
                    // this.$set(this.fileList, 'educationtableData', newval)
                    this.fileList = newval;

                }
            }
        },
    },
    methods: {
        removeItem(index) {
            this.fileList.splice(index, 1)
        },
        handlePreview(file) {
            console.log(file);
        },
        //图片上传之前触发
        beforeAvatarUpload(file) {
            console.log(file)
            var FileExt = file.name.replace(/.+\./, "");
            if (
                ["pdf"].indexOf(
                    FileExt.toLowerCase()
                ) === -1
            ) {
                // console.log(1111)
                this.$message({
                    type: "warning",
                    message: "请上传pdf格式的文件！",
                });
                return false;
            }
        },
        //自定义上传行为
        httpRequest(file) {
            let formData = new FormData();
            var FileExt = file.file.name.replace(/.+\./, "");
            formData.append("multipartFile", file.file);
            this.Api.uploadFile(formData).then(res => {
                console.log(res, "上传成功")
                if (res.code === "0") {
                    this.$set(this.fileList, this.fileList.length, {
                        url: res.data.url,
                        name: file.file.name,
                        size: file.file.size,
                    })
                    console.log(this.fileList, "fileList")
                    var data = []
                    this.fileList.forEach((item, index) => {
                        data.push({
                            url: item.url,
                            name: item.name,
                            size: item.size,
                        })
                    })
                    this.$emit("update:attachList", data)
                } else {
                    this.$message.error("文件上传失败");
                }
            })
        },
        //文件上传后预览
        beforeLooking(item) {
            let pdfLook = this.baseUrl + item.url
            window.open().document.write(
                '<body style="margin:0px;"><object data="' +
                pdfLook +
                '" type="application/pdf" width="100%" height="100%"><iframe src="' +
                pdfLook +
                '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
            )
        },
        //文件上传后下载
        downLoadPdf(item) {
            console.log(item)
            let pdfLook = this.baseUrl + item.url
            // let link2 = document.getElementById('linkUrl');
            // link2.downLoad = pdfLook
            // link2.click()
            var a = document.createElement('a');
            a.href = pdfLook
            a.download = item.name;
            a.target = '_blank'
            a.click();
            // var request = new XMLHttpRequest();
            // request.responseType = "blob"; //定义响应类型
            // request.open("GET", pdfLook);
            // request.onload = function () {
            //     var url = window.URL.createObjectURL(this.response);
            //     var a = document.createElement("a");
            //     document.body.appendChild(a);
            //     a.href = pdfLook;
            //     a.download = item.name
            //     a.click();
            // }
            // request.send();
        }
    },
};
</script>

<style lang="less" scoped>
//表头标签
.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }

    //编辑按钮的样式
    .el-button--edit {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        color: #3d7fff;
    }
}

.button-group-right {
    .el-upload--text {
        .el-button--default {
            width: 70px;
            height: 30px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(61, 127, 255, 1);
            padding: 0;
            font-size: 14px;
            font-weight: 500;
            color: rgba(61, 127, 255, 1);
            line-height: 22px;
        }
    }
}

.upload-box {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .tip {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
    }

    .upload {
        display: flex;
        width: 360px;
        height: 80px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(221, 221, 221, 1);
        padding: 15px;
        position: relative;
        margin-bottom: 20px;
        margin-right: 16px;

        .Cross {
            width: 16px;
            height: 16px;
            background: rgba(204, 204, 204, 1);
            line-height: 12px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            right: 6px;
            top: 6px;
            cursor: pointer;
        }

        .pic {
            margin-right: 15px;
        }

        .upload-right {
            h1 {
                font-size: 16px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
                margin-bottom: 14px;
            }

            .size {
                display: flex;
                justify-content: space-between;
                width: 260px;

                .tip-size {
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                    line-height: 16px;
                }

                .sonRightBotRight {
                    display: flex;
                    align-items: center;

                    .sonRightBotRightText {
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba(61, 127, 255, 1);
                        line-height: 16px;
                        cursor: pointer;
                    }

                    .sonRightBotRightImg {
                        height: 12px;
                        width: 16px;
                        cursor: pointer;
                        margin-right: 5px;
                    }

                    .sonRightBotRightInmage {
                        height: 12px;
                        width: 16px;
                        cursor: pointer;
                        margin-right: 5px;
                    }

                    .sonRightBotRightLine {
                        width: 1px;
                        height: 12px;
                        background: rgba(204, 204, 204, 1);
                        margin: 0 8px;
                    }
                }
            }
        }
    }
}

.build-ID-box {
    padding: 20px 20px 0 20px;
    background-color: rgba(255, 255, 255, 1);
}
</style>
